<script setup>
import { onMounted, reactive } from 'vue';

import { customerDetail } from '#/api/hm/customer';

const props = defineProps({
  customerId: {
    type: String,
    default: '',
  },
});
console.log(props.customerId);
onMounted(async () => {
  handleOpenChange();
});
// 数据
const data = reactive({
  recordNum: '',
  totalConsumption: '',
  saleOrderList: [],
});
async function handleOpenChange() {
  const info = await customerDetail(props.customerId);
  console.log(info);
  data.recordNum = info.recordNum;
  data.totalConsumption = info.totalConsumption;
  data.saleOrderList = info.saleOrders.rows;
  console.log(data.saleOrderList);
}

const columns = [
  {
    title: '订单编号',
    dataIndex: 'saleId',
    key: 'saleId',
  },
  {
    title: '商品名称',
    dataIndex: 'saleProductName',
    key: 'saleProductName',
  },
  {
    title: '数量',
    dataIndex: 'saleNum',
    key: 'saleNum',
  },
  {
    title: '金额 (元)',
    dataIndex: 'saleAmount',
    key: 'saleAmount',
  },
  {
    title: '购买时间',
    dataIndex: 'saleOrderTime',
    key: 'saleOrderTime',
  },
];
</script>
<template>
  <div class="mb-4">
    该用户一共有
    <span class="text-blue-600">{{ data.recordNum }}</span>
    条购买记录，总消费金额
    <span class="text-blue-600">{{ data.totalConsumption }}</span>
    元。
  </div>
  <a-table
    :data-source="data.saleOrderList"
    :columns="columns"
    :pagination="{ pageSize: 5 }"
  >
    <template #bodyCell="{ column, text }">
      <template v-if="column.dataIndex === 'saleId'">
        <div class="text-blue-500">
          {{ text }}
        </div>
      </template>
    </template>
  </a-table>
</template>
<style scoped>
.text-blue-600 {
  font-weight: 600;
  color: #2563eb;
}
</style>
